<template>
  <div class="seller">
    
    <div>

      <!-- 返回 -->
      <div class="back" @click="goBack">
        <i class="iconfont icon-back"></i>
      </div>

      <!-- 图片轮播 -->
      <swiper :list="sellerImgs" auto loop v-if="Seller.imgsReduce!=null && Seller.imgsReduce.length > 0"></swiper>
      <!-- 概览 -->
      <div class="overview">
        <div class="collect">
          <div class="sname">{{Seller.name}}</div>
          <div class="selldesc">人均消费：￥{{Seller.renjxf}}元 上菜时间：{{Seller.pingjscsj}}分钟</div>
          <div class="selldesc">营业时间：{{Seller.kaisyrTime|formatTime}} ~ {{Seller.jiesyrTime|formatTime}}</div>
          <!-- <div class="selldesc">地址：{{Seller.address}}</div> -->
          <div v-if="Seller.beiz!=null&&Seller.beiz.length >0">
            <!-- <div class="beiz" v-if="showAll==false">
              简介：{{Seller.beiz}}
            </div> -->
            <div class="beizAll">
              简介：{{Seller.beiz}}
            </div>
            <!-- <div :class="{'beizAll' :showAll==true,'beiz':showAll==false}">
              简介：{{Seller.beiz}}
            </div>
            <p v-if="showAll==false" class="btn" @click="showAll=true">全文</p> -->
          </div>

        </div>

        <!-- <div class="param">
          <div class="left">
            <span class="text">人均消费</span>
            <span class="price">
              <span class="num">￥{{Seller.renjxf}}</span>元</span>
          </div>
          <div class="right">
            <span class="text">平均上菜时间</span>
            <span class="price">
              <span class="num">{{Seller.pingjscsj}}</span>分钟</span>
          </div>
        </div> -->
      </div>

      <!-- 横线分隔条 -->
      <!-- <cross-line v-if="Vouchers!=null && Vouchers.length > 0"></cross-line> -->

      <!-- 优惠卡劵 -->
      <!-- <div class="cart-text" v-if="Vouchers!=null && Vouchers.length > 0">
        <h1 class="title">优惠卡劵</h1>
        <div v-if="Vouchers!=null" v-for="(info,index) in Vouchers" :key="index">
          <div class="text" v-if="index == 0">
            <div class="card" :style={backgroundColor:info.bgColor}>
              <div class="cart-info">
                <p class="zk-title">{{info.mingc}}</p>
                <p class="zk-desc">{{info.beiz}}</p>
                <p class="zk-desc">有效日期：{{info.kaisrqShiy |formatDate}}~{{info.jiesrqShiy | formatDate}}</p>
                <x-button class="zk-btn" mini @click.native="cartlink(info.bianh)">抢劵</x-button>
              </div>
            </div>
         
          </div>
          <div class="text" v-if="index > 0 && !cartopen">
            <div class="card" :style={backgroundColor:info.bgColor}>
              <div class="cart-info">
                <p class="zk-title">{{info.mingc}}</p>
                <p class="zk-desc">{{info.beiz}}</p>
                <p class="zk-desc">有效日期：{{info.kaisrqShiy |formatDate}}~{{info.jiesrqShiy | formatDate}}</p>
                <x-button class="zk-btn" mini @click.native="cartlink(info.bianh)">抢劵</x-button>
              </div>
            </div>
            
          </div>

        </div>
        
        <p class="btn" v-if="Vouchers.length>1 && cartopen == true" @click="cartopen=!cartopen">{{ cartopen ? '查看更多' : '收起' }}</p>
      </div> -->

      <!-- 横线分隔条 -->
      <!-- <cross-line v-if="Seller.gongg!=null && Seller.gongg.length > 0"></cross-line> -->

      <!-- 公告与活动 -->
      <!-- <div class="notice" v-if="Seller.gongg!=null && Seller.gongg.length > 0">
        <h1 class="title">公告与活动</h1>
        <div class="text" v-html="Seller.gongg"></div>
      </div> -->

      <!-- 商家介绍 -->
      <!-- 横线分隔条 -->
      <!-- <cross-line v-if="Seller.beiz!=null && Seller.beiz.length > 0"></cross-line>
      <div class="info" v-if="Seller.beiz!=null && Seller.beiz.length > 0">
        <h1 class="title">商家介绍</h1>
        <div class="text">{{Seller.beiz}}</div>
      </div> -->

      <!-- 横线分隔条 -->
      <!-- <cross-line v-if="Seller.imgsReduce!=null && Seller.imgsReduce.length > 0"></cross-line> -->
      <!-- 商家实景 -->
      <!-- <div class="photo" v-if="Seller.imgsReduce!=null && Seller.imgsReduce.length > 0">
        <h1 class="title">商家实景({{Seller.imgsReduce.length}})</h1>
        <div class="pic-wrapper" ref="picRef">
          <ul class="pic-list" ref="picListRef">
            <li class="pic-item" v-for="(url,index) in Seller.imgsReduce" :key="index">
              <img v-lazy="url" :onerror="defaultImg" @click="showImg(Seller.imgs[index])">
            </li>
          </ul>

        </div>
      </div> -->

      <!-- 横线分隔条 -->
      <cross-line v-if="CpList!=null && CpList.length > 0"></cross-line>
      <!-- 商家推荐菜 -->
      <div class="cpinfo" v-if="CpList!=null && CpList.length > 0">
        <h1 class="title">商家推荐菜({{CpList.length }})</h1>
        <div class="pic-wrapper" ref="cpRef">
          <ul class="pic-list" ref="cpListRef">
            <li class="pic-item" v-for="(info,index) in CpList" :key="index" @click="showImg(info.url,info.title)" v-if="info.urlReduce!=null && info.urlReduce.length > 0">
              <div>
                <img v-lazy="info.urlReduce" :onerror="defaultImg">
                <p>{{info.title}}</p>
              </div>

            </li>
          </ul>

        </div>
      </div>

      <!-- 横线分隔条 -->
      <cross-line></cross-line>

      <div class="info">
        <h1 class="title">商家信息</h1>
        <ul>
          <li class="item" v-if="Seller.isTgfp==1">商家提供发票，请到收银台索取。</li>
          <li class="item">{{Seller.name}}</li>
          <li class="item">{{Seller.telephone}}</li>
          <li class="item">{{Seller.address}}</li>
        </ul>
      </div>
      <!-- 横线分隔条 -->
      <!-- <cross-line></cross-line>

      <div class="info">
        <h1 class="title">技术提供商</h1>
        <ul>
          <li class="item">广西淘美味网络科技有限公司</li>
          <li class="item">0771-5348120、18172065995</li>
          <li class="item">南宁市高科路8号高科电子产业园1号楼A座第七层</li>
        </ul>
      </div> -->
    </div>

    <!-- 图片查看 -->
    <img-preview ref="ImgPreviewRef"></img-preview>

  </div>

</template>
<script>
import BScroll from "better-scroll";
import { XButton, Swiper } from "vux";
import ImgPreview from "@/components/base/img-preview";
import CrossLine from "@/components/base/cross-line";
import { sign, signStr } from "@/assets/js/sign.js";
import { formatDate } from "@/assets/js/utils.js";
export default {
  components: {
    XButton,
    CrossLine,
    ImgPreview,
    Swiper
  },
  data() {
    return {
      msg: "aaa",
      Seller: null,
      // Vouchers: null,
      CpList: null,
      cartopen: true,
      defaultImg: 'this.src="' + require("@/assets/img/logo.png") + '"',
      showAll: true,
      sellerImgs: []
    };
  },

  methods: {
    load() {
      this.Seller.imgs.forEach(url => {
        // console.log(url);
        this.sellerImgs.push({
          url: "javascript:",
          img: url,
          title: ""
        });
      });

      this.showAll = false;
      // 初始化图片横向滚动
      this.$nextTick(() => {
        // this._initPicScroll();
        this._initcpPicScroll();
      });
    },
    goBack() {
        this.$router.back(-1)
    },

    cartlink(code) {
      // if(this.$store.getters.getMemberId == 0){
      //   //登录
      //   this.$router.replace({ path: `/Member/${this.$store.getters.getMemberOpenId}` });
      // }else{
      //   //跳到领取页面
      //   this.$router.push({ path: `/VoucherMain/${code}/${this.$store.getters.getFxrId}/${this.$store.getters.getMemberId}` });
      // }
      this.$router.push({ path: `/VoucherMain/${code}/0/13` });
    },
    // 初始化图片横向滚动
    // 手动设置横向宽度
    _initPicScroll() {
      if (this.Seller.imgsReduce) {
        // console.log(1);
        const picWidth = 120;
        const margin = 6;
        let width =
          (picWidth + margin) * this.Seller.imgsReduce.length - margin;
        this.$refs.picListRef.style.width = width + "px";

        if (!this.picScroll) {
          this.picScroll = new BScroll(this.$refs.picRef, {
            click: true,
            scrollX: true,
            eventPassthrough: "vertical"
          });
        } else {
          this.picScroll.refresh();
        }
      }
    },
    // 手动设置横向宽度
    _initcpPicScroll() {
      if (this.CpList) {
        const picWidth = 120;
        const margin = 6;
        let width = (picWidth + margin) * this.CpList.length - margin;
        this.$refs.cpListRef.style.width = width + "px";
        if (!this.cpScroll) {
          this.cpScroll = new BScroll(this.$refs.cpRef, {
            click: true,
            scrollX: true,
            eventPassthrough: "vertical"
          });
        } else {
          this.cpScroll.refresh();
        }
      }
    },
    showImg(url, title) {
      this.$refs.ImgPreviewRef.show(url, title);
    }
  },
  computed: {},
  created() {
    this.Seller = this.$route.params.Seller;
    // this.Vouchers = this.$route.params.Vouchers;
    this.CpList = this.$route.params.CpList;
    this.load();
  },

  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
    formatTime(time) {
      var arr = time.split(":");
      return arr[0] + ":" + arr[1];
    }
  }
};
</script>
<style lang="sass" scoped>
@import "~@/assets/scss/mixin.scss";

.seller
  width: 100%
  background-color: #fff
  overflow: hidden
  .overview
    position: relative
    padding: 18px
    .collect
      // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      // padding-bottom: 18px 
      .sname
        font-size: 20px
        font-weight: 700
        line-height: 14px
        margin-bottom: 15px
      .star-wrapper
        display: inline-block
        margin-right: 12px
        .star
          display: inline-block
        .ratingCount
          display: inline-block
          font-size: 14px
          color: rgb(7, 17, 27)
          line-height: 14px
      .sellCount
        display: inline-block
        font-size: 10px
        color: rgb(7, 17, 27)
        line-height: 10px
      .selldesc
        font-size: 14px
        color: rgb(7, 17, 27)
        line-height: 22px
      .beizAll
        width: 100%
        font-size: 14px
        line-height: 22px
      .beiz
        width: 100%
        font-size: 14px
        line-height: 22px
        display: -webkit-box !important
        -ms-text-overflow: ellipsis
        text-overflow:ellipsis
        overflow: hidden
        -webkit-box-orient: vertical
        -webkit-line-clamp: 3
      .btn
        font-size: 12px
        line-height: 22px
        color: #13d1be
      .collect-icon
        display: inline-block
        position: absolute
        top: 18px
        right: 18px
        text-align: center
        .icon-favorite
          display: inline-block
          color: #d4d6d9
          font-size: 24px
          margin-left: 5px
          margin-bottom: 8px
          &.active
            color: rgb(240, 20, 20)
        .text
          font-size: 10px
          line-height: 10px
          color: rgb(77, 85, 93)
    .param
      padding-top: 18px
      display: flex
      .left, .mid, .right
        display: inline-block
        flex: 1
        text-align: center
        border-right: 1px solid rgba(7, 17, 27, 0.1)
        .text
          display: block
          margin-top: 18px
          margin-bottom: 4px
          color: rgb(147, 153, 159)
          font-size: 10px
          line-height: 10px
        .price
          font-size: 10px
          color: rgb(7, 17, 27)
          line-height: 24px
          margin-bottom: 18px
          .num
            font-size: 24px
      .right
        border-right: none;
  .cart-text
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .text
      padding: 8px 0 0 12px
      color: rgb(240, 20, 20)
      padding-bottom: 16px
      // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    .btn
      text-align: center
      width: 100%
      font-size 8px
      color: #13d1be
  .notice
    padding: 18px 18px 0 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .text
      padding: 8px 0 0 12px
      font-size: 14px
      line-height: 24px
      padding-bottom: 16px
      border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      li
        font-size: 14px
        line-height: 16px
        color: rgb(7, 17, 27)
        padding: 16px 12px
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    .support
      padding: 16px 12px
      border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      &:last-child
        border: none
      .icon
        display: inline-block;
        width: 18px
        height: 18px
        margin-right: 4px
        background-size: 18px 18px
        background-repeat: no-repeat
        vertical-align: top
        
      .description
        font-size: 12px
        line-height: 16px
        color: rgb(7, 17, 27)
  .photo
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .pic-wrapper
      width: 100%
      overflow: hidden
      // 图片不换行
      white-space: nowrap
      .pic-list
        font-size: 0
        .pic-item
          display: inline-block
          margin-right: 6px
          width: 120px
          height: 90px
          &:last:child
            margin-right: 0
          img
            width: 120px
            height: 90px
            border-radius: 3px
  .cpinfo
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .pic-wrapper
      width: 100%
      overflow: hidden
      // 图片不换行
      white-space: nowrap
      .pic-list
        font-size: 12px
        .pic-item
          display: inline-block
          margin-right: 6px
          width: 120px
          height: 90px
          &:last:child
            margin-right: 0
          img
            width: 120px
            height: 90px
            border-radius: 3px
          p
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
            text-align: center
          
  .info
    padding: 18px
    .title
      font-size: 14px
      color: rgb(7, 17, 27)
      margin-bottom: 12px
      line-height: 14px
    .text
      margin-top: 18px
      margin-bottom: 4px
      font-size: 14px
      line-height: 18px
    .item
      font-size: 12px
      line-height: 12px
      color: rgb(7, 17, 27)
      padding: 4px 16px
      // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
      &:last-child
        // border-bottom: 0px solid rgba(7, 17, 27, 0.1) 
</style>

<style lang="less" scoped>
.card {
  /* 相对定位，方便让before和after伪元素绝对定位偏移 */
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #ffdd1d;

  .cart-info {
    .zk-title {
      padding-left: 16px;
      width: 100%;
      color: #fff;
      font-size: 20px;
      text-align: left;
    }
    .zk-desc {
      padding-left: 16px;
      width: 100%;
      padding-top: 10px;
      color: #fff;
      font-size: 12px;
      text-align: left;
    }
    .zk-btn {
      position: absolute;
      margin-right: 10px;
      right: 0;
      top: 30%;
      background-color: #ffa500;
      color: #fff;
      font-size: 16px;
      text-align: left;
      font-weight: 700;
    }
  }
}

.card:before,
.card:after {
  content: " ";
  height: 100%;
  /* 绝对定位进行偏移 */
  position: absolute;
  top: 0;
}

.card:before {
  /* 圆点型的border */
  border-right: 8px dotted white;
  /* 偏移一个半径，让圆点的一半覆盖div */
  left: -4px;
}

.card:after {
  /* 圆点型的border */
  border-left: 8px dotted #fff;
  /* 偏移一个半径，让圆点的一半覆盖div */
  right: -4px;
}

// 返回按钮
.back {
  position: fixed;
  top: 24px;
  left: 20px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
  i {
    display: block;
    padding-left: 6px;
    padding-top: 2px;

    font-size: 20px;
    color: #fff;
  }
}
</style>


